<template>
  <div class="d-flex flex-grow align-self-center" :class="m.hhad.isBetOne ? 'sg' : 'bt-l bl-l'">
    <small class="yield font-xs" :class="'bg-' + color(m.hhad.fixed)">让球 {{m.hhad.fixed | sign}}</small>
    <div class="g box-xl py-1" :class="on('rqspf|让球胜')" @click="select('rqspf|让球胜')">
      <div :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</div>
      <b class="text-grey">主胜{{m.hhad.win}}</b>
    </div>
    <div class="g grow py-1" :class="on('rqspf|让球平')" @click="select('rqspf|让球平')">
      <div>VS</div>
      <b class="text-grey">平{{m.hhad.flat}}</b>
    </div>
    <div class="g box-xl py-1" :class="on('rqspf|让球负')" @click="select('rqspf|让球负')">
      <div :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></div>
      <b class="text-grey">客胜{{m.hhad.lose}}</b>
    </div>
  </div>
</template>

<script>
import { mixin } from './calculator'

export default {
  name: 'layout-rqspf',
  mixins: [mixin]
}
</script>
